<!doctype html>
<html>
  <head>
    <title>{title}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <style>
      body {
          width: 100%;
          hright: 100%;
          margin: 20px;
          font-family: jinkaiFont;
      }
      a {
          text-decoration: none;
          color: green;
      }
      ul {
          list-style: none;
          font-size:x-large;
          margin-bottom: 12px;
      }
      li {
          font-size: medium;
          margin-left: 4%;
          margin-top: 4px;
          color: gray;
      }
      @media screen and (max-width: 480px) {
          #page {
              width: 90%;
              margin-left: 2%;
          }
      }
      @media screen and (min-width: 480px) {
          #page {
              width: 60%;
              margin-left: 20%;
          }
      }
      #nav a {
          font-size: 18px;
          color: grey;
      }
      #title {
          font-weight: 700;
          font-size: large;
          margin-top: 72px;
          margin-bottom: 72px;
      }
    </style>
  </head>
  <body>
    <div id = "page">
      <div id = "nav">
        <a href = "./">{name}</a>
      </div>
      <article>
        <center>
          <div id = "title">
            <h2>{introduction}</h2>
          </div>
        </center>
        <div id = "book_list">
          {book_list}
        </div>
      </article>
    </div>
  </body>
</html>
